<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>

<%@include file="/common/head.jsp" %>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                    	<form role="form" class="form-inline" id="query-form" method="post" action="${ctx }/admin/family/list" >
                    		<!-- 查询开始 -->
							<%--<div class="form-group">
								<label for="query-employee" class="sr-only2">员工工号</label>
								&lt;%&ndash;<input &lt;%&ndash;type="hidden"&ndash;%&gt; id="query-employee-id" name="employee.id" value="${query.employee.id }" class="form-control">&ndash;%&gt;
								<input type="text" class="form-control" id="query-employee-user_id"&lt;%&ndash;id="employee-name" &ndash;%&gt;name="employee.user_id" placeholder="点击选择员工" value="${query.employee.user_id }"
									   onclick="bring({
											   url:'${ctx}/admin/employee/search',
											   name: 'user_id',
											   idInput: 'query-employee-user_id',
											   nameInput: 'query-employee-user_id'
											   })" />
							</div>--%>

							<div class="form-group">
								<label for="query-employee" class="sr-only2">员工id</label>
								<%--<input &lt;%&ndash;type="hidden"&ndash;%&gt; id="query-employee-id" name="employee.id" value="${query.employee.id }" class="form-control">--%>
								<input type="text" class="form-control" id="query-employee-user_id"<%--id="employee-name" --%>name="employee.user_id" placeholder="点击选择员工" value="${query.employee.user_id }"
									   onclick="bring({
											   url:'${ctx}/admin/employee/search',
											   name: 'user_id',
											   idInput: 'query-employee-user_id',
											   nameInput: 'query-employee-user_id'
											   })" />
							</div>

                            <div class="form-group">
                                <label for="query-name" class="sr-only2">姓名</label>
                                <input type="text" id="query-name" name="name" value="${query.name }" class="form-control input-sm">

                            </div>
							<div class="form-group">
								<label for="query-relation" class="sr-only2">关系</label>
								<input type="text" id="query-relation" name="relation" value="${query.relation }" class="form-control input-sm">

							</div>
                            <div class="form-group">
                                <button class="btn btn-primary btn-sm" type="submit"><i class="fa fa-search"></i>&nbsp;查询</button>
                            </div>
                            <!-- 查询结束 -->
                        </form>
                    
						<div>
							<p>
		                        <button type="button" class="btn btn-sm btn-outline btn-primary" onclick="add()"><i class="fa fa-plus"></i> 新增</button>
		                        <button type="button" class="btn btn-sm btn-outline btn-info " onclick="edit()"><i class="fa fa-paste"></i> 详情</button>
		                        <button type="button" class="btn btn-sm btn-outline btn-danger" onclick="del();">删除</button>
		                        <button type="button" class="btn btn-sm btn-outline btn-info " onclick="reOpen()"><i class="fa fa-refresh"></i> 刷新</button>
		                    </p>
						</div>
						<table id="table" data-toggle="table" data-striped="true" data-click-to-select="true" data-mobile-responsive="true">
                                    <thead>
                                        <tr>
                                            <th data-field="_state" data-checkbox="true"></th>
                                            <th data-field="id" data-visible="false">ID</th>
                                            <th data-field="employee">员工工号</th>
                                            <th data-field="name">姓名</th>
                                            <th data-field="relation">关系</th>
                                            <th data-field="contact">联系方式</th>
                                            <th data-field="age">年龄</th>
                                            <th data-field="company">工作单位</th>
                                            <th data-field="position">职位</th>
                                        </tr>
                                    </thead>
							<tbody>
								<c:forEach items="${list }" var="n" varStatus="idx">
								<tr data-index="${idx.index }" data-id="${n.id }">
									<td class="bs-checkbox">
										<input data-index="0" name="btSelectItem" type="checkbox">
									</td>
									<td style="">${n.id }</td>
									<td style="">${n.employee.user_id}</td>
										<%--新增--%>
									<%--<td style="">${n.employee.user_id}</td>--%>
									<td style="">${n.name }</td>
									<td style="">${n.relation }</td>
									<td style="">${n.contact }</td>
									<td style="">${n.age }</td>
									<td style="">${n.company }</td>
									<td style="">${n.position }</td>
								</tr>
								</c:forEach>
							</tbody>
						</table>
                   
						<%@include file="/common/page.jsp" %>

					</div>
                </div>
            </div>
        </div>
    </div>

<%@include file="/common/foot.jsp" %>
<script>
function add() {
	layer.open({
		type: 2,
		skin: 'layui-layer-rim', //加上边框
		area: [layer_default_width, layer_default_height], //宽高
		content: "${ctx}/admin/family/detail",
		btn: ['确定', '取消'],
		yes: function(index, layero){ //或者使用btn1
			var detailForm = layer.getChildFrame('form', index);
			console.log(detailForm);
			/*姓名必填*/
			var name=$('#name',detailForm).val();
			if (!!!name){alert('请输入姓名');return false};
			/*手机号码验证*/
			var phone = $('#phone', detailForm).val();
			if(!!!phone){alert('请输入手机号码.');return false;}
			var phoneReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
			if(!phoneReg.test(phone)) {
				alert('请输入正确的手机号码.');
				return false;
			}

			detailForm.ajaxSubmit({
				success: function(data) {
					if (isSuccess(data)) {
						layer.close(index);
						reload();
					} else {
					}
				}
			});
		}, cancel: function(index){ //或者使用btn2
			//按钮【按钮二】的回调
		}
	});
}

function edit() {
    var selections = $('#table').bootstrapTable('getAllSelections');
	if (selections.length == 0) {
		error(k.msg.requireOne);
		return;
	}
	if (selections.length>1){
		error(k.msg.selectOnlyOne);
		return;
	}
	var id = selections[0].id;
	layer.open({
		type: 2,
		skin: 'layui-layer-rim', //加上边框
		area: [layer_default_width, layer_default_height], //宽高
		content: "${ctx}/admin/family/detail?id="+id,
		btn: ['确定', '取消'],
		yes: function(index, layero){ //或者使用btn1
			var detailForm = layer.getChildFrame('form', index);
			console.log(detailForm);
			/*姓名必填*/
			var name=$('#name',detailForm).val();
			if (!!!name){alert('请输入姓名');return false};
			/*手机号码验证*/
			var phone = $('#phone', detailForm).val();
			if(!!!phone){alert('请输入手机号码.');return false;}
			var phoneReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
			if(!phoneReg.test(phone)) {
				alert('请输入正确的手机号码.');
				return false;
			}

			detailForm.ajaxSubmit({
				success: function(data) {
					if (isSuccess(data)) {
						layer.close(index);
						reload();
					} else {
					}
				}
			});
		}, cancel: function(index){ //或者使用btn2
			//按钮【按钮二】的回调
		}
	});
}
var page = "${page.page}";
function reload() {
	page_submit(page);
}
function del() {
	var selections = $('#table').bootstrapTable('getAllSelections');
	if (selections.length == 0) {
		error('请选择1条要删除的记录');
		return;
	}
	layer.confirm('确认要删除吗?', {icon: 3, title:'提示'}, function(index){
		var ids = new Array();
		for (var i = 0; i < selections.length; i++) {
			ids.push(selections[i].id);
		}
		$.ajax({
			url: "${ctx}/admin/family/delete",
			data: {
				ids: ids.join(',')
			},
			success: function(data) {
				if (isSuccess(data)) {
					layer.close(index);
					reload();
				}
			}
		});
	});

}

paging('pagination', ${page.totalPages}, ${page.page});

</script>
<%--k.layer.del("${ctx}/admin/family/delete");	--%>
</body>
</html>